﻿
$("#area1").hide();
$("#area2").hide();
$("#area3").hide();
$("#area4").hide();
$("#area5").hide();
$("#area6").hide();
$("#hs").hide();
$("#ts").hide();
$("#fullmap").hide();
$("#text").hide();
$("#KhungText").hide();
$("#DBB").hide();
$("#NB").hide();
$("#TB").hide();
$("#TN").hide();
$("#NTB").hide();
$("#BTB").hide();
var auto = 1;
//fullmap
var Mapx = 285, Mapy = 20;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var width = 400;
var img = document.getElementById("fullmap");
var mousex = 0, mousey = 0;
var i = 0;
var ok = 0;
var pixel1, pixel2, pixel3, pixel4, pixel5, pixel6, pixel0;
var y = 0;
var posX = 0, posY = 0;
var arrowX = 38, arrowY = 79;
//area1
var imgArea1 = document.getElementById("area1");
var imgArea2 = document.getElementById("area2");
var imgArea3 = document.getElementById("area3");
var imgArea4 = document.getElementById("area4");
var imgArea5 = document.getElementById("area5");
var imgArea6 = document.getElementById("area6");
var ts = document.getElementById("ts");
var hs = document.getElementById("hs");
var DBB = document.getElementById("DBB");
var NB = document.getElementById("NB");
var TB = document.getElementById("TB");
var TN = document.getElementById("TN");
var NTB = document.getElementById("NTB");
var BTB = document.getElementById("NTB");
//
var imgText = document.getElementById("text");
///

setInterval(function () {
    if (i == 0) {
        ok = 1;
        for (var j = 0; j < 6; j++) {
            switch (j) {
                case 0:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea1, Mapx, Mapy);
                        pixel1 = ctx.getImageData(Mapx, Mapy, 230, 433);

                    }
                    break;
                case 1:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea2, Mapx, Mapy);
                        pixel2 = ctx.getImageData(Mapx, Mapy, 230, 433);
                    }
                    break;
                case 2:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea3, Mapx, Mapy);
                        pixel3 = ctx.getImageData(Mapx, Mapy, 230, 433);
                    }
                    break;
                case 3:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea4, Mapx, Mapy);
                        pixel4 = ctx.getImageData(Mapx, Mapy, 230, 433);
                    }
                    break;
                case 4:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea5, Mapx, Mapy);
                        pixel5 = ctx.getImageData(Mapx, Mapy, 230, 433);
                    }
                    break;
                case 5:
                    {
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(imgArea6, Mapx, Mapy);
                        pixel6 = ctx.getImageData(Mapx, Mapy, 230, 433);
                    }
                    break;
            }
        }
        ctx.clearRect(0, 0, 800, 500);
        ctx.drawImage(img, Mapx, Mapy);
        ctx.drawImage(hs, 250 + 275, 170);
        ctx.drawImage(ts, 260 + 275, 350);
        //pixel0 = ctx.getImageData(0, 0, 230, 433);
        i = 1;
    }

}, 100);

$(document).mousemove(function (event) {
    var Canvas = $("#myCanvas");
    var CanvasPos = Canvas.position();
    var CanvasPosY = CanvasPos.top;
    var CanvasPosX = CanvasPos.left;
    mousex = event.pageX;
    mousey = event.pageY;
    var count = 0;
    if ((CanvasPosX + Mapx) <= mousex && mousex <= (216 + CanvasPosX + Mapx) && (CanvasPosY + Mapy) <= mousey && mousey <= (CanvasPosY + 500) + Mapy) {
    var tempx = mousex - CanvasPosX - Mapx;
    var tempy = mousey - CanvasPosY - Mapy;
    var temp = null;
    var a = tempy * (4 * 230) + 4 * tempx;
    if (tempy < 0)
        a = 0;
    if (ok == 1) {
        auto = 0;
        for (var j = 0; j < 6; j++) {
            switch (j) {
                case 0:
                    {
                        var b = pixel1.data[a + 0];
                        var c = pixel1.data[a + 1];
                        var d = pixel1.data[a + 2];

                        if (pixel1.data[a + 0] != 0 && pixel1.data[a + 1] != 0 && pixel1.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea1;
                            posX = 50 - arrowX; posY = 50 - arrowY + 30;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);
                            ctx.drawImage(TB,posX + 47, posY + 15 * 10 + 20);
                            ctx.font = "20px verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
                            ctx.fillStyle = gradient;
                            ctx.fillText("Tây Bắc Bộ", posX + 18, posY + 15 + 20);
                            ctx.font = "10px verdana";
                            ctx.fillText(" - Từ 1995 – 2009 , 5.279 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                            ctx.fillText("   chặt phá, 11.773 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                            ctx.fillText(" - 20% số mẫu khí có hàm lượng bụi ", posX + 12, posY + 15 * 4 + 20);
                            ctx.fillText("   vượt quy chuẩn ở gần khu khai thác", posX + 12, posY + 15 * 5 + 20);
                            ctx.fillText("   khoáng sản", posX + 12, posY + 15 * 6 + 20);
                            ctx.fillText(" - Từ 1958 - 2002, 97 trận lũ quét và ", posX + 12, posY + 15 * 7 + 20);
                            ctx.fillText("   5 trận lũ ống hậu quả của phá rừng", posX + 12, posY + 15 * 8 + 20);
                            ctx.fillText("   và khai thác bừa bãi", posX + 12, posY + 15 * 9 + 20);
                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
                case 1:
                    {
                        var b = pixel2.data[a + 0];
                        var c = pixel2.data[a + 1];
                        var d = pixel2.data[a + 2];

                        if (pixel2.data[a + 0] != 0 && pixel2.data[a + 1] != 0 && pixel2.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea2;
                            posX = posX + 0;
                            posY = posY + 0;
                            posX = 105 - arrowX; posY = 50 - arrowY + 30;
                            posX = posX + 450;
                            posY = posY + 0;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);
                            ctx.drawImage(DBB, posX + 47, posY + 15 * 11 + 20);
                            ctx.font = "20px Verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
                            ctx.fillStyle = gradient;
                            ctx.fillText("Đông Bắc Bộ", posX + 18, posY + 15 + 20);
                            ctx.font = "10px Verdana";
                            ctx.fillText(" - Hà Nội nằm trong 6 thành phố ô", posX + 12, posY + 15 * 2 + 20);
                            ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 3 + 20);
                            ctx.fillText(" - Hà Nội có 1,7 triệu xe máy", posX + 12, posY + 15 * 4 + 20);
                            ctx.fillText(" - Tổng lượng nước thải ở Hà Nội", posX + 12, posY + 15 * 5 + 20);
                            ctx.fillText("   300.000 – 400.000 m3/ngày", posX + 12, posY + 15 * 6 + 20);
                            ctx.fillText(" - Nếu mực nước biển dâng cao 1m,", posX + 12, posY + 15 * 7 + 20);
                            ctx.fillText("   11% diện tích đồng bằng sông Hồng", posX + 12, posY + 15 * 8 + 20);
                            ctx.fillText(" - Từ 1995 – 2009  , 1.541 ha rừng bị", posX + 12, posY + 15 * 9 + 20);
                            ctx.fillText("   chặt phá, 1.873 ha rừng bị cháy", posX + 12, posY + 15 * 10 + 20);

                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
                case 2:
                    {
                        var b = pixel3.data[a + 0];
                        var c = pixel3.data[a + 1];
                        var d = pixel3.data[a + 2];

                        if (pixel3.data[a + 0] != 0 && pixel3.data[a + 1] != 0 && pixel3.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea3;
                            posX = 105 - arrowX; posY = 150 - arrowY;
                            posX = posX + 470;
                            posY = posY + 0;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);

                            ctx.font = "20px Verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
                            ctx.fillStyle = gradient;
                            ctx.fillText("Bắc Trung Bộ", posX + 18, posY + 15+20);
                            ctx.font = "10px verdana";                           
                            ctx.fillText(" - Từ 1995 – 2009 , 3.259 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                            ctx.fillText("   chặt phá, 4.823 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                            ctx.fillText(" - Nếu mực nước biển dâng cao 1m ,", posX + 12, posY + 15 * 4 + 20);
                            ctx.fillText("   11% diện tích đồng bằng sông Hồng", posX + 12, posY + 15 * 5 + 20);                        
                            ctx.fillText(" - Tổng lượng nước thải ở các tp", posX + 12, posY + 15 * 6 + 20);
                            ctx.fillText("   lớn 300.000 – 400.000 m3/ngày", posX + 12, posY + 15 * 7 + 20);
                            ctx.fillText(" - Có 1,7 triệu xe máy", posX + 12, posY + 15 * 8 + 20);
                            ctx.fillText(" - Nằm trong 6 thành phố ô", posX + 12, posY + 15 * 9 + 20);
                            ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 10 + 20);
                            ctx.drawImage(BTB, posX + 47, posY + 15 * 11 + 20);

                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
                case 3:
                    {
                        var b = pixel4.data[a + 0];
                        var c = pixel4.data[a + 1];
                        var d = pixel4.data[a + 2];

                        if (pixel4.data[a + 0] != 0 && pixel4.data[a + 1] != 0 && pixel4.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea4;
                            posX = 190 - arrowX; posY = 265 - arrowY;
                            posX = posX + 370;
                            posY = posY -80;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);

                            ctx.font = "20px Verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
                            ctx.fillStyle = gradient;
                            ctx.fillText("Duyên Hải ", posX + 18, posY + 15+20);
                            ctx.fillText("         Nam Trung Bộ", posX + 25, posY + 15 * 2 + 30);
                            ctx.font = "10px verdana";
                            ctx.fillText(" - Từ 1995 – 2009 , 3.875 ha rừng bị ", posX + 12, posY + 15 * 2 + 45);
                            ctx.fillText("   chặt phá, 4.578 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 45);
                            ctx.fillText(" - Nếu mực nước biển dâng cao 1m ,", posX + 12, posY + 15 * 4 + 45);
                            ctx.fillText("   11% diện tích đồng bằng sông Hồng", posX + 12, posY + 15 * 5 + 45);
                            ctx.fillText(" - Tổng lượng nước thải ở các tp", posX + 12, posY + 15 * 6 + 45);
                            ctx.fillText("   lớn 300.000 – 400.000 m3/ngày", posX + 12, posY + 15 * 7 + 45);
                            ctx.fillText(" - Có 1,7 triệu xe máy", posX + 12, posY + 15 * 8 + 45);
                            ctx.fillText(" - Nằm trong 6 thành phố ô", posX + 12, posY + 15 * 9 + 45);
                            ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 10 +45 );
                            ctx.drawImage(NTB,posX + 47, posY + 15 * 11 + 45);
                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
                case 4:
                    {
                        var b = pixel5.data[a + 0];
                        var c = pixel5.data[a + 1];
                        var d = pixel5.data[a + 2];

                        if (pixel5.data[a + 0] != 0 && pixel5.data[a + 1] != 0 && pixel5.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea5;
                            posX = 170 - arrowX; posY = 290 - arrowY;
                            posX = posX-50;
                            posY = posY -100;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);
                            ctx.drawImage(TN, posX + 47, posY + 15 * 10 + 20);
                            ctx.font = "20px Verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
 
                            ctx.fillStyle = gradient;
                            ctx.fillText("Tây Nguyên", posX + 18, posY + 15+20);
                            ctx.font = "10px Verdana";
                            ctx.fillText(" - Từ 1995 – 2009 , 16.183 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                            ctx.fillText("   chặt phá,4.723 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                            ctx.fillText(" - Ô nhiễm nước vào mùa mưa và  ", posX + 12, posY + 15 * 4 + 20);
                            ctx.fillText("   ô nhiễm bụi đất đỏ vào mùa khô", posX + 12, posY + 15 * 5 + 20);
                            ctx.fillText("   do hoạt động khai thác Bô Xít", posX + 12, posY + 15 * 6 + 20);
                            ctx.fillText(" - Có 1,7 triệu xe máy", posX + 12, posY + 15 * 7 + 20);
                            ctx.fillText(" - Nằm trong 6 thành phố ô", posX + 12, posY + 15 * 8 + 20);
                            ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 9 + 20);
                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
                case 5:
                    {
                        var b = pixel6.data[a + 0];
                        var c = pixel6.data[a + 1];
                        var d = pixel6.data[a + 2];

                        if (pixel6.data[a + 0] != 0 && pixel6.data[a + 1] != 0 && pixel6.data[a + 2] != 0) {
                            count = 0;
                            ctx.clearRect(0, 0, 800, 500);
                            ctx.drawImage(img, Mapx, Mapy);
                            ctx.drawImage(hs, 250 + 275, 170);
                            ctx.drawImage(ts, 260 + 275, 350);

                            temp = imgArea6;
                            posX = 110 - arrowX; posY = 370 - arrowY;
                            posX = posX;
                            posY = posY - 120;
                            ctx.drawImage(temp, Mapx, Mapy);
                            ctx.drawImage(imgText, posX, posY);

                            ctx.font = "10px Verdana";
                            // Create gradient
                            var gradient = ctx.createLinearGradient(0, 0, width, 0);
                            gradient.addColorStop("0", "blue");
                            gradient.addColorStop("1.0", "blue");
                            // Fill with gradient
                            ctx.font = "20px Verdana";
                            ctx.fillStyle = gradient;
                            ctx.fillText("Nam Bộ", posX + 18, posY + 15 + 20);
                            ctx.font = "10px Verdana";
                              
                            ctx.fillText(" - Tp HCM nằm trong 6 thành phố ô", posX + 12, posY + 15 * 2 + 20);
                            ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 3 + 20);
                            ctx.fillText(" - Tp HCM có 3.8 triệu xe máy", posX + 12, posY + 15 * 4 + 20);
                            ctx.fillText(" - Lượng Benzen ở một số khu vực", posX + 12, posY + 15 * 5 + 20);
                            ctx.fillText("   HCM với mức trung bình 33,6 micro", posX + 12, posY + 15 * 6 + 20);
                            ctx.fillText("   gam/m3, cao gấp 6,72 lần tiêu", posX + 12, posY + 15 * 7 + 20);
                            ctx.fillText("   chuẩn của WHO", posX + 12, posY + 15 * 8 + 20);
                            ctx.fillText(" - Từ 1995 – 2009  , 7.513 ha rừng bị", posX + 12, posY + 15 * 9 + 20);
                            ctx.fillText("   chặt phá, 17.411 ha rừng bị cháy", posX + 12, posY + 15 * 10 + 20);
                            ctx.drawImage(NB, posX + 47, posY + 15 * 11 + 20);
                        }
                        else {
                            if (count != 6)
                                count++;
                        }
                    }
                    break;
            }
        }
        if (count == 6) {
            ctx.clearRect(0, 0, 800, 500);
            ctx.drawImage(img, Mapx, Mapy);
            ctx.drawImage(hs, 250 + 275, 170);
            ctx.drawImage(ts, 260 + 275, 350);
        }
    }

       }
    else {
          auto = 1;
          ctx.clearRect(0, 0, 800, 500);
          ctx.drawImage(img, Mapx, Mapy);
          ctx.drawImage(hs, 250+ 275, 170);
          ctx.drawImage(ts, 260+ 275, 350);
      }
});
setInterval(function () {
    if (auto == 1) {
     
        switch (y) {
            case 0:
                {
                    
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea1;
                        posX = 50 - arrowX; posY = 50 - arrowY + 30;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);
                        ctx.drawImage(TB, posX + 47, posY + 15 * 10 + 20);
                        ctx.font = "20px verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient
                        ctx.fillStyle = gradient;
                        ctx.fillText("Tây Bắc Bộ", posX + 18, posY + 15 + 20);
                        ctx.font = "10px verdana";
                        ctx.fillText(" - Từ 1995 – 2009 , 5.279 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                        ctx.fillText("   chặt phá, 11.773 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                        ctx.fillText(" - 20% số mẫu khí có hàm lượng bụi ", posX + 12, posY + 15 * 4 + 20);
                        ctx.fillText("   vượt quy chuẩn ở gần khu khai thác", posX + 12, posY + 15 * 5 + 20);
                        ctx.fillText("   khoáng sản", posX + 12, posY + 15 * 6 + 20);
                        ctx.fillText(" - Từ 1958 - 2002, 97 trận lũ quét và ", posX + 12, posY + 15 * 7 + 20);
                        ctx.fillText("   5 trận lũ ống hậu quả của phá rừng", posX + 12, posY + 15 * 8 + 20);
                        ctx.fillText("   và khai thác bừa bãi", posX + 12, posY + 15 * 9 + 20);

                  
                }
                break;
            case 1:
                {
                   
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea2;
                        posX = posX + 0;
                        posY = posY + 0;
                        posX = 105 - arrowX; posY = 50 - arrowY + 30;
                        posX = posX + 450;
                        posY = posY + 0;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);
                        ctx.drawImage(DBB, posX + 47, posY + 15 * 11 + 20);
                        ctx.font = "20px Verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient
                        ctx.fillStyle = gradient;
                        ctx.fillText("Đông Bắc Bộ", posX + 18, posY + 15 + 20);
                        ctx.font = "10px Verdana";
                        ctx.fillText(" - Hà Nội nằm trong 6 thành phố ô", posX + 12, posY + 15 * 2 + 20);
                        ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 3 + 20);
                        ctx.fillText(" - Hà Nội có 1,7 triệu xe máy", posX + 12, posY + 15 * 4 + 20);
                        ctx.fillText(" - Tổng lượng nước thải ở Hà Nội", posX + 12, posY + 15 * 5 + 20);
                        ctx.fillText("   300.000 – 400.000 m3/ngày", posX + 12, posY + 15 * 6 + 20);
                        ctx.fillText(" - Nếu mực nước biển dâng cao 1m,", posX + 12, posY + 15 * 7 + 20);
                        ctx.fillText("   11% diện tích đồng bằng sông Hồng", posX + 12, posY + 15 * 8 + 20);
                        ctx.fillText(" - Từ 1995 – 2009  , 1.541 ha rừng bị", posX + 12, posY + 15 * 9 + 20);
                        ctx.fillText("   chặt phá, 1.873 ha rừng bị cháy", posX + 12, posY + 15 * 10 + 20);

                   
                }
                break;
            case 2:
                {
                 
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea3;
                        posX = 105 - arrowX; posY = 150 - arrowY;
                        posX = posX + 470;
                        posY = posY + 0;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);

                        ctx.font = "20px Verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient
                        ctx.fillStyle = gradient;
                        ctx.fillText("Bắc Trung Bộ", posX + 18, posY + 15 + 20);
                        ctx.font = "10px verdana";
                        ctx.fillText(" - Từ 1995 – 2009 , 3.259 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                        ctx.fillText("   chặt phá,4.823 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                    
                  
                }
                break;
            case 3:
                {
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea4;
                        posX = 190 - arrowX; posY = 265 - arrowY;
                        posX = posX + 370;
                        posY = posY - 80;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);

                        ctx.font = "20px Verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient
                        ctx.fillStyle = gradient;
                        ctx.fillText("Duyên Hải Nam", posX + 18, posY + 15 + 20);
                        ctx.fillText("              Trung Bộ", posX + 25, posY + 15 * 2 + 30);
                        ctx.font = "10px verdana";
                        ctx.fillText(" - Từ 1995 – 2009 , 3.875 ha rừng bị ", posX + 12, posY + 15 * 2 + 45);
                        ctx.fillText("   chặt phá, 4.578 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 45);
                    
                }
                break;
            case 4:
                {
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea5;
                        posX = 170 - arrowX; posY = 290 - arrowY;
                        posX = posX - 50;
                        posY = posY - 100;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);
                        ctx.drawImage(TN, posX + 47, posY + 15 * 7 + 20);
                        ctx.font = "20px Verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient

                        ctx.fillStyle = gradient;
                        ctx.fillText("Tây Nguyên", posX + 18, posY + 15 + 20);
                        ctx.font = "10px Verdana";
                        ctx.fillText(" - Từ 1995 – 2009 , 16.183 ha rừng bị ", posX + 12, posY + 15 * 2 + 20);
                        ctx.fillText("   chặt phá,4.723 ha rừng bị cháy", posX + 12, posY + 15 * 3 + 20);
                        ctx.fillText(" - Ô nhiễm nước vào mùa mưa và  ", posX + 12, posY + 15 * 4 + 20);
                        ctx.fillText("   ô nhiễm bụi đất đỏ vào mùa khô", posX + 12, posY + 15 * 5 + 20);
                        ctx.fillText("   do hoạt động khai thác Bô Xít", posX + 12, posY + 15 * 6 + 20);
                }
                break;
            case 5:
                {
                        count = 0;
                        ctx.clearRect(0, 0, 800, 500);
                        ctx.drawImage(img, Mapx, Mapy);
                        ctx.drawImage(hs, 250 + 275, 170);
                        ctx.drawImage(ts, 260 + 275, 350);

                        temp = imgArea6;
                        posX = 110 - arrowX; posY = 370 - arrowY;
                        posX = posX;
                        posY = posY - 120;
                        ctx.drawImage(temp, Mapx, Mapy);
                        ctx.drawImage(imgText, posX, posY);

                        ctx.font = "10px Verdana";
                    // Create gradient
                        var gradient = ctx.createLinearGradient(0, 0, width, 0);
                        gradient.addColorStop("0", "blue");
                        gradient.addColorStop("1.0", "blue");
                    // Fill with gradient
                        ctx.font = "20px Verdana";
                        ctx.fillStyle = gradient;
                        ctx.fillText("Nam Bộ", posX + 18, posY + 15 + 20);
                        ctx.font = "10px Verdana";

                        ctx.fillText(" - Tp HCM nằm trong 6 thành phố ô", posX + 12, posY + 15 * 2 + 20);
                        ctx.fillText("   nhiễm không khí nhất thế giới", posX + 12, posY + 15 * 3 + 20);
                        ctx.fillText(" - Tp HCM có 3.8 triệu xe máy", posX + 12, posY + 15 * 4 + 20);
                        ctx.fillText(" - Lượng Benzen ở các trục giao", posX + 12, posY + 15 * 5 + 20);
                        ctx.fillText("   thông tại tp HCM với mức trung", posX + 12, posY + 15 * 6 + 20);
                        ctx.fillText("   bình 33,6 micro gam/m3, cao gấp", posX + 12, posY + 15 * 7 + 20);
                        ctx.fillText("   6,72 lần tiêu chuẩn của WHO", posX + 12, posY + 15 * 8 + 20);
                        ctx.fillText(" - Từ 1995 – 2009  , 7.513 ha rừng bị", posX + 12, posY + 15 * 9 + 20);
                        ctx.fillText("   chặt phá, 17.411 ha rừng bị cháy", posX + 12, posY + 15 * 10 + 20);
                        ctx.drawImage(NB, posX + 47, posY + 15 * 11 + 20);
                }
                break;
        }
        y++;
        if (y == 6)
            y = 0;
    }
    //
}, 5500);